<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./code/chapter/16_game.js"></script>
    <script src="./code/levels.js"></script>
    <script src="./code/chapter/17_canvas.js"></script>
</head>

<body>

    <canvas width="600" height="300"></canvas>
    <script>
        let cx = document.querySelector("canvas").getContext("2d");
        let total = results
            .reduce((sum, { count }) => sum + count, 0);
        let currentAngle = -0.5 * Math.PI;
        let centerX = 300, centerY = 150;

        for (let result of results) {
            let sliceAngle = (result.count / total) * 2 * Math.PI;
            cx.beginPath();
            cx.arc(centerX, centerY, 100,
                currentAngle, currentAngle + sliceAngle);
            currentAngle += sliceAngle;
            cx.lineTo(centerX, centerY);
            cx.fillStyle = result.color;
            cx.fill();
        }
    </script>
</body>

</html>